﻿    /*
    Thanks a lot to 
	    Milkbox v2.2 - required: mootools.js v1.2.1 core + more: Assets
    		
	    by Luca Reghellin (http://www.reghellin.com) January 2009, MIT-style license.
	    Inspiration Lokesh Dhakar (http://www.lokeshdhakar.com/projects/lightbox2/)
	    AND OF COURSE, SPECIAL THANKS TO THE MOOTOOLS DEVELOPERS
*/

var Lbox = new Class({

	Implements:[Options,Events],
	options:{//set all the options here
		overlayOpacity:0.2,
		topPosition:150,
        shadowThickness:{x:7,y:10},
		initialWidth:250,
		initialHeight:250,
		canvasBorderWidth:'0px',
		canvasBorderColor:'#000000',
		canvasPadding:'0px',
		resizeDuration:200,
		resizeTransition:'sine:in:out', /*function (ex. Transitions.Sine.easeIn) or string (ex. 'bounce:out')*/
		onClosed:$empty
	},
	
	initialize: function(options){
		this.setOptions(options);
		this.fullOptionsBkup = {};
		
		this.currentFile = null;
		
		this.closed = true;
		this.formtags = null;
				
		this.initMilkbox();
		
		this.saveOptions(); //then use restoreOptions()
	},//end init
	
	initMilkbox:function(){
		this.prepareHTML();
		this.prepareEffects();
		this.prepareEvents();
		
		this.formtags = $$('select');
		this.activated = true;
	},
	
	/* ****** SHOW/HIDE ****** */
	
	show:function(div){
	
        var size = div.getSize();
        div.store("width",size.x); 
        div.store("height",size.y);

        //alert(h(size));		
        
		this.closed = false;
		
		if(Browser.Engine.trident4 && this.formtags.length != 0){ 
		    this.formtags.setStyle('display','none') 
		};

		this.overlay.setStyles({ 'top': -$(window).getScroll().y,'height':$(window).getScrollSize().y + $(window).getScroll().y });
		this.center.setStyle('top', $(window).getScroll().y + this.options.topPosition);
		
		if (!window.isIE){
		    this.center.addClass("lbLoading");
		}
		this.overlay.tween('opacity',this.options.overlayOpacity);
		
		this.currentFile = div;
		
		this.showFile(div);
	},
	
	showFile:function(div){
 		if(this.closed){ 
 		    return; 
 		};//if you close the Milkbox and an onload event is still running
 		
 		var fileSize = new Hash();
 		
 		var targetSize = {};
 		
 		var canvasSize = this.canvas.getSize();
 		
 		this.canvas.setStyles({'opacity':0, 'width':'', 'height':''});
 		
 		fileSize.extend({ 'height':div.retrieve('height').toInt(), 'width':div.retrieve('width').toInt() });
 		
 		targetSize.width = fileSize.width;
 		
 		if (window.ltr){
 		    targetSize.marginLeft = -(targetSize.width/2).round();
 		}else{
 		    targetSize.marginRight = -(targetSize.width/2).round();
 		}
 		 		
 	    targetSize.height = fileSize.height;
 	    
		//so nav doesn't move when you click next/prev
		this.canvas.setStyles({'width':fileSize.width, 'height':fileSize.height});

 		(function(){ this.center.morph(targetSize); }).delay(500,this)//onComplete: show all items
	},
	/* ****** INIT ****** */
	//all the main events
	prepareEvents:function(){
		//overlay
		this.overlay.get('tween').addEvent('onComplete',function(){
			if(this.overlay.getStyle('opacity') == this.options.overlayOpacity){ 
				this.center.tween('opacity',1);
			} else if(this.overlay.getStyle('opacity') == 0) {
				this.overlay.setStyles({'height':0,'top':''});
			};
		}.bindWithEvent(this));
		
		//center
		this.center.get('morph').addEvent('onComplete',function(){
 		     this.center.removeClass('lbLoading');
        
			 this.canvas.grab(this.currentFile);
			 
			 this.canvas.tween('opacity',1);
			 
			 this.currentFile.setStyles({
			    "position":"static",
			    "visibility":"visible",
			    "top":0,
			    "left":0
			 });

			var currentCenterHeight = this.center.getStyle('height').toInt();
			 
            //reset overlay height based on position and height
            var scrollSize = $(window).getScrollSize().y;
            var scrollTop = $(window).getScroll().y;

            this.overlay.setStyles({'height':scrollSize+scrollTop, 'top':-scrollTop });
             
            var centerSize = this.center.getSize();
            var centerCoordinates = this.center.getCoordinates();
            
            this.shadow.setStyles({
                'width':centerSize.x,
                'height':centerSize.y,  
                'top':centerCoordinates.top + this.options.shadowThickness.y,
                'opacity':0.3
            });
            if (window.ltr){
 		        this.shadow.setStyle("marginLeft", this.center.getStyle("marginLeft").toInt() - this.options.shadowThickness.x);
 		    }else{
 		        this.shadow.setStyle("marginRight", this.center.getStyle("marginRight").toInt() - this.options.shadowThickness.x);
 		    }

		}.bindWithEvent(this));

		//reset overlay height and position onResize
		window.addEvent('resize',function(){
			if(this.overlay.getStyle('opacity') == 0){ return; };//resize only if visible
			var scrollSize = $(window).getScrollSize().y;
			var scrollTop = $(window).getScroll().y;
			this.overlay.setStyles({ 'height':scrollSize+scrollTop,'top':-scrollTop });
		}.bindWithEvent(this));

		//close
		//$$(this.overlay,this.close).addEvent('click',function(){ this.closeMilkbox(); }.bindWithEvent(this));
	},
	
	prepareEffects:function(){
		this.overlay.set('tween',{ duration:'short',link:'cancel' });
		this.center.set('tween',{ duration:'short',link:'chain' });
		this.center.set('morph',{ duration:this.options.resizeDuration,link:'chain',transition:this.options.resizeTransition });
		this.center.store('setFinalHeight',new Fx.Tween(this.center,{property:'height',duration:'short'}));
		this.canvas.set('tween',{ link:'chain' });
	},
		
	prepareHTML:function(){		
		this.overlay = new Element('div', { 
			'id':'lbOverlay',
			'styles':{ 
				'height':0,
				'opacity':0,
				'visibility':'visible',
				'overflow':'hidden' 
			}
		}).inject($(document.body));
		
		this.center = new Element('div', {
		    'id':'lbCenter', 
		    'styles':{
		        'width':this.options.initialWidth,
		        'height':this.options.initialHeight,
		        'opacity':0 }
		}).inject($(document.body));
		
        if (window.ltr){
            this.center.setStyle("marginLeft", - (this.options.initialWidth / 2));
        }else{
            this.center.setStyle("marginRight", - (this.options.initialWidth / 2));
        }
        
		this.canvas = new Element('div', {'id':'lbCanvas'}).inject(this.center);
        
		this.shadow = new Element('div', {
		    'id':'lbShadow'
        }).inject($(document.body));
	},
	
	closeMilkbox:function(){
		this.currentFile.destroy();
		this.cancelAllEffects();
 		
    	this.canvas.setStyles({'opacity':0, 'width':'', 'height':''});
 		this.canvas.empty();
 		
		this.center.setStyles({
		    'opacity':0,
		    'width':this.options.initialWidth,
		    'height':this.options.initialHeight
		});
		
        if (window.ltr){
            this.center.setStyle("marginLeft", - (this.options.initialWidth / 2));
        }else{
            this.center.setStyle("marginRight", - (this.options.initialWidth / 2));
        }
        
		this.overlay.tween('opacity',0);//see onComplete in prepareEvents() 
		
		if(this.formtags.length != 0){ this.formtags.setStyle('display','') };
		
		this.closed = true;
		this.fireEvent('closed');
		this.shadow.setStyle("opacity", 0);
	},
	
	cancelAllEffects:function(){
		this.overlay.get('tween').cancel();
		this.center.get('morph').cancel();
		this.center.get('tween').cancel();
		this.center.retrieve('setFinalHeight').cancel();
		this.canvas.get('tween').cancel();
	},
	
	/* ****** UTILS ****** */
	changeOptions:function(obj){
		if(!obj){ return; }
		this.setOptions(obj);
 		this.center.get('morph').setOptions({ transition:this.options.resizeTransition,  duration:this.options.resizeDuration });
	},
	
	saveOptions:function(obj){
		if($chk(obj)){
			this.fullOptionsBkup = obj;
		} else {
			this.fullOptionsBkup = this.options;
		}
	},
	
	restoreOptions:function(){
		this.setOptions(this.fullOptionsBkup);
 		b = this.options.canvasBorderWidth + ' solid ' + this.options.canvasBorderColor;
 		this.canvas.setStyles({ 'border':b, 'padding':this.options.canvasPadding});
 		this.center.get('morph').setOptions({ transition:this.options.resizeTransition,  duration:this.options.resizeDuration });
	}
	
});//END;

window.addEvent('domready', function(){ 
	//lbox = new Lbox();
	    /* Just for examle
        lbox.changeOptions({ 
            overlayOpacity:0.3,
            topPosition:250,
        });
   */
});
